<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-position="top" :border-bottom="false" :error-type="['toast']">
			<u-form-item label="相册名称" prop="title" :border-bottom="false">
				<u-input v-model="form.title" />
			</u-form-item>
			<u-form-item label="相册描述" prop="content">
				<u-input v-model="form.content" />
			</u-form-item>
			<u-form-item label="相册封面" prop="cover">
				<u-upload ref="uUpload" width="140" height="140"
					:file-list="fileList"
					:action="action" :form-data="formData" :header="header"
					:auto-upload="true" :max-count="1">
				</u-upload>
			</u-form-item>
			<u-form-item label="是否公开" :border-bottom="false">
				<u-switch v-model="switchVal" size="30"></u-switch>
			</u-form-item>
			<view style="display: flex;justify-content: center;align-items: center;margin-top: 100rpx;">
				<view class="common-btn" @click="submit">确认</view>
			</view>
		</u-form>
	</view>
</template>

<script>
	import { addAlbum, getAlbum } from '@/api/album.js'
	import { http } from '@/api/service.js'
	import XUpload from '@/components/x-upload'
	export default {
		components: {
			XUpload
		},
		data() {
			return {
				action: '',
				formData: {
					'recordType': 'handover'
				},
				header: {
					ticket: '',
				},
				
				form: {
					title: '',
					content: '',
					cover: '',
					privated: true,
				},
				fileList: [],
				switchVal: true,
				
				rules: {
					title: [{
						required: true,
						message: '请填写相册名称',
						trigger: ['change']
					}, ],
					content: [{
						required: true,
						message: '请填写相册描述',
						trigger: ['change']
					}, ],
					cover: [{
						validator: (rule, value, callback) => {
							if (this.$refs.uUpload.lists.length > 0) {
								return true;
							}
							return false;
						},
						message: '请上传相册封面',
					}]
				},
			}
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			if (!this.$u.test.isEmpty(this.id)) {
				this.get()
			}
			this.action = `${http.config.baseURL}pad/upload/record_img`;
			this.header.ticket = uni.getStorageSync('ticket');
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);	
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.add();
						return;
					}
				});
			},

			add() {
				this.form.privated = this.switchVal;
				uni.showLoading({})
				let files = this.$refs.uUpload.lists;
				if (files.length > 0) {
					if (this.$u.test.isEmpty(files[0].response)) {
						this.form.cover = files[0].url;
					} else {
						this.form.cover = files[0].response.data;
					}
				};
				addAlbum(this.form).then(res => {
					uni.hideLoading()
					console.log(res);
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('addSuccessEvent', {data: ''});
					uni.navigateBack({})
				})
			},
			get() {
				getAlbum({albumId: this.id}).then(res => {
					console.log(res)
					const { title, content, privated, id, cover } = res.data;
					const form = {
						title,
						content,
						privated,
						albumId: id
					};
					this.form = form;
					let fileList = [];
					if (!this.$u.test.isEmpty(cover)) {
						fileList = cover.split('|').map(x => {
							return {
								url: x
							}
						})
					};
					this.fileList = fileList
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss" scoped>
	@import "@/css/u-form.scss";

	.container {
		padding-left: 40rpx;
		padding-right: 40rpx;
	}
	
	.action-view{
		margin-top: 60rpx;
	}
</style>
